class Product {
    constructor() {
        //获取详细商品信息
        this.getInf();
        //设置遮罩层和放大镜
        this.$('.bigImg').addEventListener('mouseover', this.bigImgO);
        this.$('.bigImg').addEventListener('mouseout', this.bigImgC);
        //点击增减数量,事件委托给两个箭头的父节点
        // console.log(this.$('.arrow'));

    }
    /* ***获取详细商品信息*** */
    async getInf() {
        //获取商品id
        let goodsId = location.search.split('?').pop();
        // console.log(goodsId);
        //发送至服务器
        let res = await axios.get('http://localhost:8888/goods/item?id=' + goodsId);
        // console.log(res);
        let inf = res.data.info;
        // console.log(inf);
        //设置插入文字
        let str = `<div class="productTitle">
        ${inf.title}
    </div>
    <div class="productSubTitle">
        高端定制 高档棉麻 现货即发 加购物车 领优惠卷
    </div>
    
    <div class="productPrice">
        <div class="juhuasuan">
            <span class="juhuasuanBig">聚划算</span>
            <span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
        </div>
        <div class="productPriceDiv">
            <div class="gouwujuanDiv"><img height="16px" src="http://how2j.cn/tmall/img/site/gouwujuan.png">
                <span> 全天猫实物商品通用</span>
            
            </div>
            <div class="originalDiv">
                <span class="originalPriceDesc">价格</span>
                <span class="originalPriceYuan">¥</span>
                <span class="originalPrice">
                ${inf.price}
        </span>
            </div>
            <div class="promotionDiv">
                <span class="promotionPriceDesc">促销价 </span>
                <span class="promotionPriceYuan">¥</span>
                <span class="promotionPrice">
                ${inf.current_price}
        </span>
            </div>
        </div>
    </div>
    <div class="productSaleAndReviewNumber">
        <div>销量 <span class="redColor boldWord"> 50</span></div>
        <div>累计评价 <span class="redColor boldWord"> 19</span></div>
    </div>
    <div class="productNumber">
        <span>数量</span>
        <span>
    <span class="productNumberSettingSpan">
    <input class="productNumberSetting" type="text" value="1">
    </span>
    <span class="arrow">
        <a class="increaseNumber" href="#nowhere">
        <span class="updown">
                <img src="http://how2j.cn/tmall/img/site/increase.png">
        </span>
        </a>
        
        <span class="updownMiddle"> </span>
        <a class="decreaseNumber" href="#nowhere">
        <span class="updown">
                <img src="http://how2j.cn/tmall/img/site/decrease.png">
        </span>
        </a>
        
    </span>
    
件</span>
        <span>库存${inf.goods_number}件</span>
    </div>
    <div class="serviceCommitment">
        <span class="serviceCommitmentDesc">服务承诺</span>
        <span class="serviceCommitmentLink">
    <a href="#nowhere">正品保证</a>
    <a href="#nowhere">极速退款</a>
    <a href="#nowhere">赠运费险</a>
    <a href="#nowhere">七天无理由退换</a>
</span>
    </div>
    
    <div class="buyDiv">
        <a class="buyLink" href="#nowhere">
            <button class="buyButton">立即购买</button>
        </a>
        <a class="addCartLink" href="#nowhere">
            <button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车
            </button>
        </a>
    </div> `
        // 设置商品id保存于class中
        Product.id = inf.goods_id;
        //获取插入点
        this.$('.infoInimgAndInfo').innerHTML = str;
        //   console.log(inf.goods_introduce);
        this.$('.productDetailImagesPart').innerHTML = inf.goods_introduce;
        // console.log(this.$('.bigImg'));
        this.$('.bigImg').setAttribute('src', inf.img_big_logo);
        this.$('#img').setAttribute('src', inf.img_big_logo);
        this.$('.smallImageDiv img').forEach(element => {
            element.setAttribute('src', inf.img_big_logo)
        });
        //点击增减数量,事件委托给两个箭头的父节点
        this.$('.arrow').addEventListener('click', this.upDown);
        //给立即购买绑定点击事件
        this.$('.buyButton').addEventListener('click', this.buy)
        //给加入购物车绑定点击事件
        this.$('.addCartButton').addEventListener('click', this.car)
    };
    /* ***设置遮罩层和放大镜*** */
    /* ****鼠标移入事件**** */
    bigImgO = () => {
        // console.log(1111);
        //鼠标移入,出现大图和遮罩层
        this.$('#big').style.display = 'block';
        this.$('#mask').style.display = 'block';
        this.$('.bigImg').addEventListener('mousemove', this.moveImgO);
    }
    /* ****设置鼠标移动事件**** */
    moveImgO = (eve) => {
        // 设置遮罩层的位置
        //获取图片的位置
        //获取的是图片的宽和高
        let imgX = this.$('.bigImg').offsetWidth;
        let imgY = this.$('.bigImg').offsetHeight;
        //获取的是遮罩层的宽和高
        let boxW = this.$('#mask').offsetWidth;
        let boxH = this.$('#mask').offsetHeight;
        //获取的是鼠标相对于父节点的位置
        let mouseX = eve.offsetX;
        let mouseY = eve.offsetY;
        // console.log(img_x, img_y, mouseX, mouseY);
        //遮罩层随鼠标移动而移动
        let trX = mouseX - boxW / 2;
        let trY = mouseY - boxH / 2;
        //进行边距的判断
        //左
        if (mouseX < boxW / 2) { trX = 0 }
        //右
        if (mouseX > imgX - boxW / 2) { trX = imgX - boxW }
        // 上
        if (mouseY < boxH / 2) { trY = 0 }
        //下
        if (mouseY > imgY - boxH / 2) { trY = imgY - boxH }
        this.$('#mask').style.left = trX + 'px';
        this.$('#mask').style.top = trY + 'px';

        //获取大图的移动
        //mask移动的距离 / mask移动的最大距离 == 
        //img移动的距离 / img移动的最大距离
        //img移动的距离 = (mask移动的距离 / mask移动的最大距离 )* img移动的最大距离
        let bigMoveX = (trX / (imgX - boxW)) * 400;
        let bigMoveY = (trY / (imgY - boxH)) * 400;
        // console.log(bigMoveX, bigMoveY);
        this.$('#img').style.left = -bigMoveX + 'px';
        this.$('#img').style.top = -bigMoveY + 'px'
    }
    /* ****鼠标移出事件**** */
    bigImgC = () => {
        // console.log(1111);
        this.$('#big').style.display = 'none';
        this.$('#mask').style.display = 'none';
    }
    /* ***加减事件 */
    upDown = () => {
        let eve = window.event;
        // console.log(eve.target);
        //点击上时触发增加
        if (eve.target.parentNode.classList.contains('increaseNumber')) {
            // console.log(11111);
            let num = this.$('.productNumberSetting').value - 0;
            // console.log(num);
            num++;
            this.$('.productNumberSetting').value = num;
        };
        //点击下时触发减少
        if (eve.target.parentNode.classList.contains('decreaseNumber')) {
            // console.log(222222);
            let num = this.$('.productNumberSetting').value - 0;
            // console.log(num);
            if (num <= 1) { num = 1 }
            else { num--; }
            this.$('.productNumberSetting').value = num;
        }
    }
    /* ****加入购物车事件**** */
    car = () => {
        // console.log(Product.id);
        //获取商品id
        let goodsId = Product.id;
        //获取用户id
        let userId = localStorage.getItem('id');
        // console.log(goodsId, userId);
        //设置准备传送的字符串
        let str = `id=${userId}&goodsId=${goodsId}`;
        // console.log(str);
        const AUTH_TOKEN = localStorage.getItem('token');
        // console.log(AUTH_TOKEN);
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        //发送添加购物车
        axios.post('http://localhost:8888/cart/add', str)
            .then(ele => {
                console.log(ele);
                if (ele.data.code == 1 && ele.status == 200) {
                    this.numGoods();
                } else {
                    return;
                }
            })
    }
    /* ***多个数量的添加购物车*** */
    numGoods() {
        // 获取数量
        let num = this.$('.productNumberSetting').value;
        // console.log(num);
        //获取商品id
        let goodsId = Product.id;
        //获取用户id
        let userId = localStorage.getItem('id');
        // console.log(goodsId,userId);
        //设置准备传送的字符串
        let str = `id=${userId}&goodsId=${goodsId}&number=${num}`;
        // console.log(str);
        const AUTH_TOKEN = localStorage.getItem('token');
        // console.log(AUTH_TOKEN);
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        axios.post('http://localhost:8888/cart/number', str)
            .then(ele => {
                console.log(ele);
            })
    }
    /* ****立即购买事件*** */
    buy = () => {
        // console.log(this);
        // console.log(Product.id);
        this.car()
        //设置跳转功能
        let str = Product.id;
        setTimeout(()=>{
            location.assign('settlement.html?' + str + '&');
            console.log(11111111);
        },1000)
    }
    /* ************自己做的获取节点**************** */
    $(ele) {
        let node = document.querySelectorAll(ele);
        return node.length == 1 ? node[0] : node;
    }
};
new Product;